import React from 'react';
import { connect } from 'react-redux';
// import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_accommodation';
// import { Link } from 'react-router-dom';
import moment from 'moment';
import {
    Button,
    CellHeader,
    CellBody,
    CellFooter,
    Form,
    FormCell,
    Input,
    Label,
    PickerGroup,
    Picker
  } from 'react-weui/build/packages'
  
class RoomPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            picker_show: false,
            picker_value: props.bedName,
            picker_group: [
                {
                    items: [
                        {
                            label: '单住大床'
                        },
                        {
                            label: '单住标间'
                        },
                        {
                            label: '合住'
                        }
                    ]
                }
            ]
        }
    }
    render() {
        return (
            <div>
                <FormCell>
                    <CellBody>
                        <Input
                            type="text"
                            onClick={e=>{
                                e.preventDefault()
                                this.setState({picker_show: true})
                            }}
                            placeholder="请选择房间类型"
                            value={this.state.picker_value}
                            readOnly={true}
                        />
                    </CellBody>
                </FormCell>
                <Picker
                    onChange={selected=>{
                        let value = ''
                        selected.forEach( (s, i)=> {
                            value = this.state.picker_group[i]['items'][s].label
                        })
                        this.setState({
                            picker_value: value,
                            picker_show: false
                        })
                    }}
                    groups={this.state.picker_group}
                    show={this.state.picker_show}
                    onCancel={e=>this.setState({picker_show: false})}
                />
            </div>
        )
    }
}

class AccommodationView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          id: ''
      }
  }
  componentDidMount() {
    let {
        match
    } = this.props;
    let id = match.params&&match.params.id;
    let pattern = match.params&&match.params.pattern;
    this.setState({
        id: id,
        pattern: pattern
    })
    if(pattern==='1'){  // pattern = 1
        document.title='住宿选择';
    }else{
        document.title='住宿查看';
        this.props.getAccommodation(id);
    }

  }
  render() {
    let {
      state=[],
      stateChange
    } = this.props;
    return (
        <div className='accommodation'>
            {
                state.map((item, index) => {
                    let beginTime = item.beginTime || '';
                    let endTime = item.endTime || '';
                    let nightLen = Math.ceil((endTime - beginTime)/(1000*60*60*24)) || '';
                    return (
                        <Form key={item.id}>
                            <FormCell>
                                <CellHeader>
                                    <Label>{item.name}</Label>
                                </CellHeader>
                            </FormCell>
                            <FormCell>
                                <CellHeader>
                                    <div className="check-in-out">
                                        <div className="check">
                                            <span>入住</span>
                                            <button
                                                onClick={() => {
                                                    let input = document.getElementById(item.id+'beginTime');
                                                    input.focus();
                                                    input.click();
                                                }}
                                            >{moment(+beginTime).format('M月D日')}</button>
                                            <input id={item.id+'beginTime'} type="date" className="input" onChange={(e) => {
                                                state[index].beginTime = new Date(e.target.value).getTime();
                                                stateChange(state);
                                            }}/>
                                        </div>
                                        <span className="line">/</span>
                                        <div className="check">
                                            <span>离店</span>
                                            <button
                                                onClick={() => {
                                                    let input = document.getElementById(item.id+'endTime');
                                                    input.focus();
                                                    input.click();
                                                }}
                                            >{moment(+endTime).format('M月D日')}</button>
                                            <input id={item.id+'endTime'} type="date" className="input" onChange={(e) => {
                                                state[index].endTime = new Date(e.target.value).getTime();
                                                stateChange(state);
                                            }}/>
                                        </div>
                                    </div>
                                </CellHeader>
                                <CellFooter className="total-days">
                                    {nightLen} 晚
                                </CellFooter>
                            </FormCell>
                            {false&&<FormCell>
                                <CellHeader>
                                    <Label>City</Label>
                                </CellHeader>
                                <CellBody>
                                    <Input
                                        value={''}
                                        type="date"
                                        onClick={ e=> {
                                            e.preventDefault();
                                            this.setState({city_show: true})
                                        }}
                                        placeholder="Chose Your City"
                                        readOnly={true}
                                    />
                                </CellBody>
                            </FormCell>}
                            {false&&<PickerGroup
                                data={[]}
                                 show={this.state.city_show}
                            />} 
                            <RoomPicker bedName={item.bedName}/>
                        </Form>
                    )
                })
            }
            <Button>确认</Button>
        </div>
    )
  }
}

export default connect( (store) => {
  return {
    ...store.accommodation
  }
}, {
  ...actions
})(AccommodationView);